<template>
  <div class="page">
    <OtherHeader pageTitle="提交建议"></OtherHeader>
    <div class="contain_wrap wrapper">
      <div class="content">
        <img class="lm_img" :src="lmImg"/>
        <van-cell-group>
          <van-field
              v-model="title"
              label="标题"
              :formatter="formatter"
              placeholder="请输入建议标题"
              maxlength="50"
              label-width="4em"
              size="large"
          />
          <van-field
              v-model="content"
              rows="2"
              autosize
              label="内容"
              type="textarea"
              maxlength="300"
              placeholder="请输入建议内容"
              show-word-limit
              label-width="4em"
              size="large"
          />
        </van-cell-group>
        <div class="m_devide"></div>
        <van-cell-group>
          <van-field v-model="recommendationName" label="姓名" />
          <van-field v-model="recommendationTell" type="tel" label="电话" />
          <van-radio-group class="public_item" v-model="isPublic" direction="horizontal">
            <van-radio name="1" checked-color="#1d66bb">公开</van-radio>
            <van-radio name="2" checked-color="#1d66bb" class="mar_l0">保密</van-radio>
          </van-radio-group>
        </van-cell-group>
      </div>
    </div>
    <div class="sumbit_btn" @click="submit">提交</div>
  </div>
</template>

<script>
import OtherHeader from "@/components/OtherHeader";
import BScroll from "better-scroll";
import axios from "axios";
// import $http from "@/service";
export default {
  name: 'ZWT',
  data() {
    return {
      questions:"",
      answer:"",
      from:"180****8400",
      lmImg: require("../assets/leave_mess.jpg"),
      loadStatus:true,

      title:"",
      content:"",
      recommendationName:"",
      recommendationTell:"",
      isPublic:"1"
    }
  },
  mounted() {
    this.$nextTick(() => {
      var scrollCom=new BScroll(document.querySelector(".wrapper"), {
        probeType: 3,
        click: true,
        pullUpLoad: true
      });
      scrollCom.on('scroll', (pos) => {
        // 下拉分段加载
        if (pos.y < 50 && this.loadStatus) {
          console.log("loading more...")
          //this.loadStatus = false
        }
      })
    })
  },
  methods:{
    submit(){
      var errorText=""
      if(this.recommendationTell===""){
        errorText = "请填写您的手机"
      }
      if(this.recommendationTell.length!==11){
        errorText = "手机号码填写有误"
      }
      if(this.content===""){
        errorText = "请填写留言内容"
      }
      if(this.title===""){
        errorText = "请填写留言标题"
      }
      if(this.recommendationName===""){
        errorText = "请填写留言姓名"
      }
      if(errorText){
        this.$toast(errorText)
      }else{
        const url = "http://8.155.49.183/api/tfxq/messageSave";
        axios.post(url, {
          title: this.title,
          content: this.content,
          recommendationTell: this.recommendationTell,
          recommendationName: this.recommendationName,
          isPublic: this.isPublic
        }, {
          headers: {
            'Content-Type': 'application/json' // 不需要设置Content-Type，axios会自动设置，但如果需要自定义，可以添加此行。默认情况下不需要设置。
          }
        }).then(response => {
          if(response.data.success){
            this.$toast.success({
              message:'建议提交成功',
              onClose:()=>{
                this.$router.push({
                  path: '/mysuggestion',
                  query: {
                    phone:this.recommendationTell
                  }
                })
              }
            })
          }else{
            this.$toast.fail("建议提交失败，请稍后重试")
          }
        }).catch(error => {
          console.log("notice data error!", error)
          this.$toast.fail("建议提交失败，请稍后重试")
        });
      }
    }
  },
  components: {OtherHeader}
}
</script>

<style lang="scss" scoped>
.page{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .contain_wrap {
    margin-top: 4.2rem;
    text-align: center;
    overflow: hidden;

    .content {
      width: 100%;
      padding-bottom: 2.6rem;
      .lm_img{
        width:100%;
        display: block;
        margin:0.6rem 0 0.3rem;
      }
      .m_devide{
        width:100%;
        height:0.5rem;
        background: $sColor;
      }
      .public_item{
        padding:0.8rem 1rem;
      }
      .mar_l0{
        margin-left: 0.8rem;
      }
    }
  }
  .sumbit_btn{
    width:100%;
    height:3.2rem;
    background: $mColor;
    position: absolute;
    bottom:0;
    text-align: center;
    font-size: $aText;
    color:$wColor;
    line-height: 3.5rem;
  }
}
</style>
